<template>
  <div class="storeBody wap">
    <div class="storeHead display-flex flex-direction-column">
      <div class="storeHeadTop display-flex flex-direction-row justify-content-flex-justify">
        <div
          class="storeHeadL display-flex flex-direction-row align-items-center justify-content-flex-justify"
        >
          <img src="../../../assets/img/cart/back@2x.png" @click="goManage" alt />
          <p @click="goShopInfo">{{shopInfo.name}}</p>
          <span
            class="callUser display-flex flex-direction-row align-items-center justify-content-flex-center"
            @click="goShopInfo"
          >
            <span :style="{marginTop:this.$platform() == 1?'0.05rem':'0'}">商家详情</span>
          </span>
        </div>
        <div
          v-show="showShareBtn"
          class="storeHeadR display-flex flex-direction-row align-items-center justify-content-flex-justify"
        >
          <img @click="showPopover" src="../../../assets/img/cart/add.png" alt />
          <div v-show="popover" class="popover display-flex flex-direction-column">
            <div @click="shareLink" class="display-flex flex-direction-row align-items-center">
              <img style="margin: 0 .4rem;" src="../../../assets/img/cart/shareLink.png" alt />
              <p>店铺链接</p>
            </div>
            <div @click="shareQR" class="display-flex flex-direction-row align-items-center">
              <img style="margin: 0 .4rem;" src="../../../assets/img/cart/QRCode.png" alt />
              <p style="border-bottom: 1px solid #ffffff">店铺二维码</p>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="tongzhi" v-if="false" @click="goShopInfo"><img src="../../../assets/img/customer/tongzhi.png" alt=""><span>{{this.shopInfo.notice}}</span>
      </div>-->
      <div class="storeMiddle">
        <input
          class="searchInput"
          type="text"
          v-model="keyWord"
          :placeholder="searchIcon"
          readonly
          @click="searchInput()"
        />
      </div>
      <!--新增 start-->
      <div class="storeHeadBottom display-flex new" :class="{active: current==-1}">
        <div
          class="left display-flex flex-direction-row align-items-center"
          @click="chooseCategory('', 'current', -1)"
        >
          <span class="selectIcon"></span>
          活动专区
        </div>
        <div class="right" v-if="current != -1">
          <div
            class="item align-items-center justify-content-flex-center"
            @click="chooseCategory('', 'secondCurrent', -1)"
            :class="{active: -1 == secondCurrent}"
          >全部</div>
          <div
            class="item align-items-center justify-content-flex-center"
            @click="chooseCategory(item.id, 'secondCurrent', index)"
            :class="{active: index == secondCurrent}"
            v-for="(item, index) in goodsCategoryArr[current]['children']"
            :key="item.id"
          >{{item.name}}</div>
        </div>
      </div>
      <!--新增 end-->
      <!-- <div class="storeHeadBottom display-flex flex-direction-row" v-if="false">
        <p
          class="display-flex flex-direction-row align-items-center justify-content-flex-center"
          :style="{color:(tabNum==3?'#FFFFFF':'#333333'),backgroundColor:(tabNum==3?'#527DD9':null)}"
        >
          <span v-if="tabNum==3" :style="{marginTop:this.$platform() == 1?'0.1rem':'0'}">商品分类</span>
          <span
            v-else
            @click="selectTab(3)"
            :style="{marginTop:this.$platform() == 1?'0.1rem':'0'}"
          >商品分类</span>
        </p>
        <p
          class="display-flex flex-direction-row align-items-center justify-content-flex-center"
          :style="{color:(tabNum==1?'#FFFFFF':'#333333'),backgroundColor:(tabNum==1?'#527DD9':null)}"
        >
          <span v-if="tabNum==1" :style="{marginTop:this.$platform() == 1?'0.1rem':'0'}">销量</span>
          <span
            v-else
            @click="selectTab(1)"
            :style="{marginTop:this.$platform() == 1?'0.1rem':'0'}"
          >销量</span>
        </p>
        <p
          class="display-flex flex-direction-row align-items-center justify-content-flex-center"
          :style="{color:(tabNum==2?'#FFFFFF':'#333333'),backgroundColor:(tabNum==2?'#527DD9':null)}"
        >
          <span v-if="tabNum==2" :style="{marginTop:this.$platform() == 1?'0.1rem':'0'}">新品</span>
          <span
            v-else
            @click="selectTab(2)"
            :style="{marginTop:this.$platform() == 1?'0.1rem':'0'}"
          >新品</span>
        </p>
        <p
          class="display-flex flex-direction-row align-items-center justify-content-flex-center"
          :style="{color:(tabNum==4?'#FFFFFF':'#333333'),backgroundColor:(tabNum==4?'#527DD9':null)}"
        >
          <span v-if="tabNum==4" :style="{marginTop:this.$platform() == 1?'0.1rem':'0'}">活动专区</span>
          <span
            v-else
            @click="selectTab(4)"
            :style="{marginTop:this.$platform() == 1?'0.1rem':'0'}"
          >活动专区</span>
        </p>
      </div>-->
    </div>

    <div class="storeContent main">
      <div class="tab3 display-flex flex-direction-row">
        <scroller
          style="width: 1.66rem;background-color: #F7F7F7;z-index: 1;"
          :on-refresh="refresh1"
          :on-infinite="infinite1"
          ref="my_scroller_tab3Left"
          :noDataText="''"
        >
          <div class="tab3L" style="overflow-y: auto">
            <p
              v-for="(item,index) in goodsCategoryArr"
              :key="index"
              @click="chooseCategory(item.id, 'current', index)"
              class="display-flex flex-direction-row align-items-center"
              :style="{backgroundColor:(current==index)?'#FFFFFF':null,color:(current==index)?'#222222':'#333333',fontWeight:(current==index)?'bold':null}"
            >
              <span
                :style="{backgroundColor:(current==index)?'#527DD9':'#F7F7F7'}"
                class="selectIcon"
              ></span>
              <span>{{item.name}}</span>
            </p>
          </div>
        </scroller>
        <div style="position: relative;overflow: hidden;width: 7.5rem">
          <div
            class="right"
            style="width: 5.84rem; box-sizing: border-box; margin-left: 1.66rem;"
            v-if="secondCurrent != -1 && goodsCategoryArr[current]['children'] && goodsCategoryArr[current]['children'][secondCurrent]['children']"
          >
            <div
              class="item display-flex flex-direction-row align-items-center justify-content-flex-center"
              @click="chooseCategory('', 'threeCurrent', -1)"
              :class="{active: -1 == threeCurrent}"
            >全部</div>
            <div
              class="item display-flex flex-direction-row align-items-center justify-content-flex-center"
              @click="chooseCategory(item.id, 'threeCurrent', index)"
              :class="{active: index == threeCurrent}"
              v-for="(item, index) in goodsCategoryArr[current]['children'][secondCurrent]['children']"
              :key="item.id"
            >{{item.name}}</div>
          </div>
          <scroller
            style="margin-left: 1.66rem;"
            :style="{marginTop: secondCurrent != -1 && goodsCategoryArr[current]['children'] && goodsCategoryArr[current]['children'][secondCurrent]['children'] ? '.8rem' : 0}"
            class="tab3R"
            :on-refresh="refresh"
            :on-infinite="getList"
            ref="my_scroller_tab1"
            :noDataText="this.$noData(tabDataArr)"
            @on-scroll="tabScroll"
          >
            <good-item-two
              :list="tabDataArr"
              @collect="collect"
              :shopZeroSaleState="shopZeroSaleState"
              :tabNum="tabNum"
            ></good-item-two>
          </scroller>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { Storage } from "../../../service/storage";
import goodItemTwo from "../../../components/good-item-two.vue";
import tab from "../../../components/tab.vue";
import { Popover } from "vux";

export default {
  name: "storePage_keepAlive",
  components: {
    tab,
    Popover,
    goodItemTwo,
  },
  data() {
    return {
      distributorInfoIsOk: false, // 用户信息是否完善
      shopId: "",
      shopInfo: {},
      searchIcon: "\ue630 请输入商品名称查找商品",
      keyWord: "",
      tabNum: 3,
      hisTabNum: 3,
      tab3LHeight: "",
      selectTab3Item: null,
      orderType: 0,
      goodsCategoryId: "",
      goodsName: "",
      pageNum: 1,
      goodsCategoryArr: [
        {
          children: [
            {
              children: [],
            },
          ],
        },
      ],
      tabDataArr: [],
      popover: false,
      showShareBtn: false,
      linkURL: "",
      noData: true,
      shopZeroSaleState: null,
      isLoad: false,
      fromManage: 0,
      isScroll: true,
      current: 0, // 当前选中的一级分类索引
      secondCurrent: -1,
      threeCurrent: -1,
      activeStatus: false,
      tab1ScrollTo: 0,
      scrollToPageNum: 1,
    };
  },

  beforeRouteLeave(to, from, next) {
    //记录离开时的位置
    // let currentPosition =
    //   this.$refs.my_scroller_tab1 &&
    //   this.$refs.my_scroller_tab1.getPosition() &&
    //   this.$refs.my_scroller_tab1.getPosition().top;
    // console.log("leave" + this.tabNum, currentPosition)
    // sessionStorage.scrollToPageNum = this.pageNum;
    // sessionStorage.tab1ScrollTo =
    //   this.$refs.my_scroller_tab1 &&
    //   this.$refs.my_scroller_tab1.getPosition() &&
    //   this.$refs.my_scroller_tab1.getPosition().top;
    // sessionStorage.current = this.current;
    // sessionStorage.secondCurrent = this.secondCurrent;
    // sessionStorage.threeCurrent = this.threeCurrent;
    // sessionStorage.tabNum = this.tabNum;
    // if (this.tabNum == 1) {
    //   sessionStorage.tab1ContentP = currentPosition ? currentPosition : 0;
    // } else if (this.tabNum == 2) {
    //   sessionStorage.tab2ContentP = currentPosition ? currentPosition : 0;
    // } else if (this.tabNum == 3) {
    //   sessionStorage.tab3ContentP = currentPosition ? currentPosition : 0;
    //   let position =
    //     this.$refs.my_scroller_tab3Left &&
    //     this.$refs.my_scroller_tab3Left.getPosition() &&
    //     this.$refs.my_scroller_tab3Left.getPosition().top;
    //   sessionStorage.tab3Positon = position ? position : 0;
    // } else {
    //   sessionStorage.tab4ContentP = currentPosition ? currentPosition : 0;
    // }
    next();
  },

  activated() {
    if (
      !this.shopId ||
      this.shopId != this.$route.query.id ||
      !this.distributorInfoIsOk
    ) {
      this.init();
    } else {
      this.tab1ScrollTo = sessionStorage.tab1ScrollTo || 0;
      this.refreshList();
      setTimeout(() => {
        if (this.$refs.my_scroller_tab1) {
          this.$refs.my_scroller_tab1.scrollBy(0, this.tab1ScrollTo, false);
        }
      }, 20);
    }
  },

  deactivated() {
    sessionStorage.tab1ScrollTo =
      this.$refs.my_scroller_tab1 &&
      this.$refs.my_scroller_tab1.getPosition() &&
      this.$refs.my_scroller_tab1.getPosition().top;
  },
  mounted() {
    this.$callJava({ onBackPressed: true });
    document
      .getElementsByClassName("storeBody")[0]
      .addEventListener("click", this.clickLogin, false);

    document
      .getElementsByClassName("storeBody")[0]
      .addEventListener("touchmove", this.touchMoveScroll, false);
    // console.log("storepage mounted", sessionStorage.askPositon)
    // this.$refs.my_scroller_tab1&&this.$refs.my_scroller_tab1.finishInfinite(true)
    window["androidCallJs"] = this.androidCallJs;
    this.oldOnBackPressed = window["onBackPressed"];
    window["onBackPressed"] = this.goBack.bind(this);
    // this.$callJava({onBackPressed:true})

    setTimeout(() => {
      this.$refs.my_scroller_tab3Left.$el.style.width = `1.66rem`;
    }, 200);
  },

  beforeDestroy() {
    this.$callJava({ onBackPressed: false });
    if (document.getElementsByClassName("storeBody")[0]) {
      document
        .getElementsByClassName("storeBody")[0]
        .removeEventListener("click", this.clickLogin, false);
      document
        .getElementsByClassName("storeBody")[0]
        .removeEventListener("touchmove", this.touchMoveScroll, false);
    }

    window["onBackPressed"] = this.oldOnBackPressed;
  },
  methods: {
    init() {
      //console.log("store created")
      // let id = this.$route.query.id;
      this.scrollToPageNum = sessionStorage.scrollToPageNum || 1;
      this.tab1ScrollTo = sessionStorage.tab1ScrollTo || 0;
      this.current = sessionStorage.current || 0;
      this.secondCurrent = sessionStorage.secondCurrent || -1;
      this.threeCurrent = sessionStorage.threeCurrent || -1;

      let cate_id = sessionStorage.cate_id;
      sessionStorage.cate_id = "";

      if (this.$fromApp(this)) {
        this.showShareBtn = true;
        this.tab3LHeight =
          (document.body.clientHeight * 2) / 100 - 3.75 + "rem";
      } else {
        this.showShareBtn = false;
        this.tab3LHeight =
          (document.body.clientHeight * 2) / 100 - 3.71 + "rem";
        Storage.set("sellerId", this.$route.query.id);
      }
      if (
        this.$route.query &&
        this.$route.query.Authorization &&
        (this.$route.query.Authorization != "" ||
          this.$route.query.Authorization != null ||
          this.$route.query.Authorization != undefined)
      ) {
        Storage.set("token", this.$route.query.Authorization);
      }
      this.shopId = this.$route.query.id;
      this.fromManage = this.$route.query.fromManage
        ? this.$route.query.fromManage
        : 0;
      this.linkURL =
        this.$webUrl +
        "purchase/storePage?isQrShare=1&id=" +
        this.$route.query.id;

      setTimeout(() => {
        //统计进入店铺的买家
        this.$ajax.get(
          "replenish/visit/shop",
          (res) => {
            // console.log(res);
            if (res.code == "10005") {
              //获取用户信息，判断是否完善信息
              if (!this.$fromApp(this)) {
                this.$vux.toast.text("基础信息未完善", "middle");
                this.distributorInfoIsOk = false;
                setTimeout(() => {
                  this.$router.push({
                    path: "/shop/manage",
                    query: { type: 1 },
                  });
                  return;
                }, 1000);
                return;
              }
            } else {
              this.distributorInfoIsOk = true;
            }
          },
          { sellerId: this.$route.query.id }
        );

        //获取经销商信息
        this.$ajax.get(
          "common/distributor/info",
          (res) => {
            if (res.code == "200" && res.data) {
              //console.log('经销商信息：', res)
              this.shopInfo = res.data;
              this.shopZeroSaleState = res.data.zeroSaleFlag;
              // 如果是扫码进来的 isQrShare=1， 需要判断是否erp，如果是则跳转首页
              if (res.data.erpStatus == 1 && this.$route.query.isQrShare == 1) {
                this.$router.replace({
                  path: "/index",
                  query: {
                    from: this.$route.query.from,
                    id: this.$route.query.id,
                  },
                });
              }
            }
          },
          { distributorId: this.$route.query.id }
        );

        // if (sessionStorage.goodsCategoryArr) {
        //   this.goodsCategoryArr = JSON.parse(sessionStorage.goodsCategoryArr)
        //   this.selectTab3Item = sessionStorage.goodsCategoryArr[0].id;
        //   this.goodsCategoryId = sessionStorage.goodsCategoryArr[0].id;
        //   this.shareInit();
        //   setTimeout(() => {
        //     if (!sessionStorage.tabNum) {
        //       sessionStorage.tabNum = 3;
        //       sessionStorage.goodsCategoryId = this.goodsCategoryId
        //
        //     }
        //     this.selectTab(parseInt(sessionStorage.tabNum), 1)
        //   }, 200)
        // } else {
        //获取商品类别列表
        // this.$ajax.get('replenish/goods_category/list', res => {
        //   console.log("列别", res.data);
        //   if (res.code == '200' && res.data.length > 0) {
        //     this.goodsCategoryArr = res.data;
        //     // sessionStorage.goodsCategoryArr = JSON.stringify(res.data);
        //     this.selectTab3Item = res.data[0].id;
        //     this.goodsCategoryId = res.data[0].id;
        //   }
        //   this.shareInit();
        //   setTimeout(() => {
        //     if (!sessionStorage.tabNum) {
        //       sessionStorage.tabNum = 3;
        //       sessionStorage.goodsCategoryId = this.goodsCategoryId
        //     }
        //     this.selectTab(parseInt(sessionStorage.tabNum), 1)
        //   }, 200)
        //
        // }, {sellerId: this.$route.query.id});

        var sellerId = this.$route.query.id
          ? this.$route.query.id
          : this.shopInfo.id;
        // console.log('sellerId', sellerId)
        this.$ajax.get(
          "goods/category/tree",
          (res) => {
            if (res.code == "200" && res.data.length > 0) {
              // var resData = res.data
              // var length = resData.length()
              // for (let i = 0; i < length; i++) {
              //   var secondChild = resData[i]['children']
              //   if (!secondChild) {
              //     continue
              //   }
              // }
              this.goodsCategoryArr = res.data;
              if (cate_id) {
                let stack = [];
                this.findCategoryIndexStack(
                  this.goodsCategoryArr,
                  stack,
                  cate_id
                );
                this.current = stack[0] || -1;
                this.secondCurrent = stack[1] || -1;
                this.threeCurrent = stack[2] || -1;
                this.goodsCategoryId = cate_id;
              } else {
                let cate;
                if (this.current >= 0) {
                  cate = this.goodsCategoryArr[this.current];
                }
                if (this.secondCurrent >= 0) {
                  cate = cate.children[this.secondCurrent];
                }
                if (this.threeCurrent >= 0) {
                  cate = cate.children[this.threeCurrent];
                }
                this.goodsCategoryId = cate ? cate.id : "";
              }
              this.initList();
              // this.getList();
              // sessionStorage.goodsCategoryArr = JSON.stringify(res.data);
              // this.selectTab3Item = res.data[0].id;
              //console.log('res.data[0].id', res.data[0].id)
              // this.goodsCategoryId = res.data[0].id;
            }
            this.shareInit();
            // setTimeout(() => {
            //   if (!sessionStorage.tabNum) {
            //     sessionStorage.tabNum = 3;
            //     sessionStorage.goodsCategoryId = this.goodsCategoryId;
            //   }
            //   this.selectTab(parseInt(sessionStorage.tabNum), 1);
            // }, 200);
          },
          { sellerId }
        );
        // }
      }, 50);
    },
    findCategoryIndexStack(arr, stack, cate_id, floor = 0) {
      if (!arr) return false;
      for (let index in arr) {
        stack[floor] = index;
        if (arr[index].id == cate_id) return true;
        if (
          this.findCategoryIndexStack(
            arr[index].children,
            stack,
            cate_id,
            floor + 1
          )
        ) {
          return true;
        }
      }
      stack[floor] = -1;
    },
    goBack() {
      // this.$callJava({code:1007})
      // this.$router.go(-1);
      if (this.$fromApp(this)) {
        if (this.$route.query.fromPush) {
          this.$callJava({ code: 1007 });
        } else {
          this.$router.go(-1);
        }
      } else {
        this.$router.go(-1);
      }
    },
    chooseCategory(cateId, key, index) {
      this.goodsCategoryId = cateId;
      switch (key) {
        case "current":
          this.secondCurrent = -1;
          this.threeCurrent = -1;
          if (index < 0) {
            this.goodsCategoryId = "";
          }
          break;
        case "secondCurrent":
          this.threeCurrent = -1;
          if (index < 0) {
            this.goodsCategoryId = this.goodsCategoryArr[this.current].id;
          }
          break;
        case "threeCurrent":
          if (index < 0) {
            this.goodsCategoryId = this.goodsCategoryArr[this.current].children[
              this.secondCurrent
            ].id;
          }
          break;
      }
      this[key] = index;
      this.initList();
      // this.getList();
    },
    initList() {
      this.pageNum = 1;
      this.noData = false;
      this.isLoad = false;
      this.tabDataArr = [];
      if (this.$refs.my_scroller_tab1) {
        this.$refs.my_scroller_tab1.finishInfinite(false);
      }
    },
    getList(done) {
      if (this.noData) {
        this.$refs.my_scroller_tab1.finishPullToRefresh();
        this.$refs.my_scroller_tab1.finishInfinite(true);
        return;
      }
      if (this.isLoad) return;
      let params = {
        // goodsName: name,
        orderType: this.current < 0 ? 2 : 0,
        goodsCategoryId: this.goodsCategoryId,
        sellerId: this.shopId,
        pageNo: this.pageNum++,
        pageSize: 10,
      };
      this.isLoad = true;
      this.$ajax.get(
        "replenish/search_goods/list",
        (res) => {
          //this.$vux.toast.text(res.msg, 'center');
          if (res.code == 200) {
            // console.log(res)
            for (let i = 0; i < res.data.length; i++) {
              for (let j = 0; j < res.data[i].unitVOList.length; j++) {
                if (!res.data[i].unitVOList[j].shoppingCartVO) {
                  res.data[i].unitVOList[j].shoppingCartVO = { num: 0 };
                }
                if (
                  this.shopZeroSaleState == 0 &&
                  res.data[i].zeroSaleFlag == 0
                ) {
                  res.data[i].unitVOList[j].stockFlag = false;
                } else {
                  if (
                    res.data[i].unitVOList[j].shoppingCartVO.num >=
                    res.data[i].unitVOList[j].goodsStock
                  ) {
                    res.data[i].unitVOList[j].stockFlag = true;
                  } else {
                    res.data[i].unitVOList[j].stockFlag = false;
                  }
                }
              }
            }

            if (res.data) {
              this.tabDataArr = this.tabDataArr.concat(res.data);
              // if (this.isScroll) {
              //   console.log("scroll", this.isScroll);
              //   this.getScroll();
              // }
            }
            if (!res.data || !res.data.length) {
              this.noData = true;
              setTimeout(() => {
                if (this.$refs.my_scroller_tab1) {
                  this.$refs.my_scroller_tab1.finishPullToRefresh();
                  this.$refs.my_scroller_tab1.finishInfinite(true);
                }
              }, 200);
            }

            if (typeof done == "function") {
              done();
            }
            setTimeout(() => {
              if (this.$refs.my_scroller_tab1) {
                this.$refs.my_scroller_tab1.finishPullToRefresh();
              }
            }, 200);

            this.isLoad = false;
            if (this.pageNum < this.scrollToPageNum) {
              this.getList(done);
            } else if (this.scrollToPageNum > 1) {
              this.scrollToPageNum = 1;
              setTimeout(() => {
                this.$refs.my_scroller_tab1.scrollTo(
                  0,
                  this.tab1ScrollTo,
                  false
                );
              }, 200);
            }

            console.log("tabData", this.tabDataArr);
          } else {
            // this.$vux.toast.text(res.msg, 'center');
          }
        },
        params
      );
    },
    refreshList() {
      let params = {
        // goodsName: name,
        orderType: this.current < 0 ? 2 : 0,
        goodsCategoryId: this.goodsCategoryId,
        sellerId: this.shopId,
        pageNo: 1,
        pageSize: this.pageNum * 10,
      };
      this.$ajax.get(
        "replenish/search_goods/list",
        (res) => {
          //this.$vux.toast.text(res.msg, 'center');
          if (res.code == 200) {
            // console.log(res)
            for (let i = 0; i < res.data.length; i++) {
              for (let j = 0; j < res.data[i].unitVOList.length; j++) {
                if (!res.data[i].unitVOList[j].shoppingCartVO) {
                  res.data[i].unitVOList[j].shoppingCartVO = { num: 0 };
                }
                if (
                  this.shopZeroSaleState == 0 &&
                  res.data[i].zeroSaleFlag == 0
                ) {
                  res.data[i].unitVOList[j].stockFlag = false;
                } else {
                  if (
                    res.data[i].unitVOList[j].shoppingCartVO.num >=
                    res.data[i].unitVOList[j].goodsStock
                  ) {
                    res.data[i].unitVOList[j].stockFlag = true;
                  } else {
                    res.data[i].unitVOList[j].stockFlag = false;
                  }
                }
              }
            }

            this.tabDataArr = res.data;
            // setTimeout(() => {
            //   this.$refs.my_scroller_tab1.scrollTo(0, this.tab1ScrollTo, false);
            // }, 200);
          }
        },
        params
      );
    },
    // 容器滚动
    tabScroll(e) {
      console.log(e);
    },
    switchTab(val, index) {
      //console.log(val)
      this.secondCurrent = index;
      // 新加
      this.pageNum = 1;
      this.noData = false;
      this.$refs.my_scroller_tab3 &&
        this.$refs.my_scroller_tab3.finishInfinite(false);
      this.goodsCategoryId = val;
      sessionStorage.goodsCategoryId = val;
      sessionStorage.tab3Positon =
        this.$refs.my_scroller_tab3Left &&
        this.$refs.my_scroller_tab3Left.getPosition() &&
        this.$refs.my_scroller_tab3Left.getPosition().top;

      this.touchMoveScroll();
      this.$refs.my_scroller_tab1.scrollTo(0, 0, false);
      this.initData(-1, val);
    },
    switchTabThree(val, index) {
      this.threeCurrent = index;
      // 新加
      this.pageNum = 1;
      this.noData = false;
      this.$refs.my_scroller_tab3 &&
        this.$refs.my_scroller_tab3.finishInfinite(false);
      this.goodsCategoryId = val;
      sessionStorage.goodsCategoryId = val;
      sessionStorage.tab3Positon =
        this.$refs.my_scroller_tab3Left &&
        this.$refs.my_scroller_tab3Left.getPosition() &&
        this.$refs.my_scroller_tab3Left.getPosition().top;

      this.touchMoveScroll();
      this.$refs.my_scroller_tab1.scrollTo(0, 0, false);
      this.initData(-1, val);
    },
    // 收藏处理
    collect(e) {
      //console.log('collect', e)
    },
    clickLogin() {
      let that = this;
      //console.log("id", that.$route.query.id)
      // console.log("shopId", that.$route.query.shopId)

      if (that.$route.query.id || that.$route.query.shopId) {
        // that.$vux.toast.text(that.$route.query.id+"---"+that.$route.query.shopId, 'center');
        let params = {
          sellerId: that.$route.query.id
            ? that.$route.query.id
            : that.$route.query.shopId,
          pageNo: 1,
          pageSize: 10,
        };
        // that.$ajax.get('replenish/bug_history/list', res => {
        //   if (res.code == '200') {
        //   } else {
        //     that.$vux.toast.text(res.msg, 'center');
        //   }
        // }, params)
      }
    },
    touchMoveScroll() {
      //console.log("--------1111-----")
      if (this.promise) {
        clearTimeout(this.promise);
      }
      this.isScroll = false;
      this.promise = setTimeout(() => {
        this.isScroll = true;
      }, 3000);
    },
    touchmove(e) {
      // console.log("move")
    },
    onBackPressed() {
      // this.$vux.toast.text(this.$route.path, 'center');
      if (this.$fromApp(this)) {
        if (this.$route.query.fromPush) {
          this.$callJava({ code: 1007 });
        } else if (this.$route.path == "/purchase/storePage") {
          this.$callJava({ code: 1007 });
        } else {
          this.$router.go(-1);
        }
      } else {
        this.$router.go(-1);
      }
    },
    androidCallJs(val) {
      // val={"Authorization":"eyJhbGciOiJIUzUxMiJ9.eyJqdGkiOiI3NzU4MmRlMi00MzJmLTRiNWUtOTYxNi0zZmYxMWQxYzI3MzEiLCJzdWIiOiIxMzAiLCJpc3MiOiIxMzAiLCJleHAiOjE1ODM4MTEyMTl9.I06XzfdYhMPIchagZlyethujw35AD8pv2jN441cjOtPZhakemhuSX8EYihaLbqkXf72a5F0HkdxvsDxxjdI9gQ","msg":"{\"title\":\"客户标签\",\"url\":\"http:\\\/\\\/192.168.248.41:8080\\\/#\\\/customer\\\/lable?from=app&Authorization=eyJhbGciOiJIUzUxMiJ9.eyJqdGkiOiI3NzU4MmRlMi00MzJmLTRiNWUtOTYxNi0zZmYxMWQxYzI3MzEiLCJzdWIiOiIxMzAiLCJpc3MiOiIxMzAiLCJleHAiOjE1ODM4MTEyMTl9.I06XzfdYhMPIchagZlyethujw35AD8pv2jN441cjOtPZhakemhuSX8EYihaLbqkXf72a5F0HkdxvsDxxjdI9gQ&customerId=131\",\"msg\":\"{\\\"code\\\":1003,\\\"localRefresh\\\":true,\\\"LableList\\\":[{\\\"id\\\":36,\\\"name\\\":\\\"46456456\\\",\\\"sellerId\\\":130}],\\\"buyerId\\\":\\\"131\\\"}\"}"};
      // this.$vux.toast.text(val, 'center');
      // console.log("===val", val);
      // this.$vux.toast.text("111", 'center');
      try {
        let obj = JSON.parse(val);
        if (
          obj.Authorization &&
          (obj.Authorization != "" ||
            obj.Authorization != null ||
            obj.Authorization != undefined)
        ) {
          Storage.set("token", obj.Authorization);
        }
      } catch (e) {}
    },

    isIos() {
      const u = navigator.userAgent;
      return u.indexOf("iPhone") > -1 || u.indexOf("Mac OS") > -1;
    },

    shareInit() {
      let _this = this;
      let url = "";
      if (this.isIos()) {
        url = window.location.href;
        url = url.split("#");
        url = url[0];
      } else {
        url = window.location.href;
      }

      let options = {
        url: url,
      };

      this.$ajax.post("wechat/signature/jsapi", options, (res) => {
        wx.config({
          debug: false,
          appId: res.data.appId,
          timestamp: res.data.timestamp,
          nonceStr: res.data.nonceStr,
          signature: res.data.signature,
          jsApiList: [
            "checkJsApi",
            "onMenuShareTimeline",
            "onMenuShareAppMessage",
          ],
        });

        wx.ready(function () {
          wx.onMenuShareTimeline({
            title: `${_this.shopInfo.name}`, // 分享标题
            link:
              _this.$webUrl +
              "purchase/storePage?isQrShare=1&id=" +
              _this.shopId,
            imgUrl: _this.shopInfo.logo || "", // 分享图标
            success: function () {
              // 用户确认分享后执行的回调函数
            },
            cancel: function () {
              // 用户取消分享后执行的回调函数
            },
          });
          wx.onMenuShareAppMessage({
            title: `${_this.shopInfo.name}`,
            desc: "这家店实在是太棒了!", // 分享描述
            link:
              _this.$webUrl +
              "purchase/storePage?isQrShare=1&id=" +
              _this.shopId,
            imgUrl: _this.shopInfo.logo || "",
            success: function () {
              // 用户确认分享后执行的回调函数
            },
            cancel: function () {
              // 用户取消分享后执行的回调函数
            },
          });
        });
      });
    },
    deWeight(arr) {
      //对象数组去重
      if (arr == "" || arr == null) {
        arr = [];
      }
      const res = new Map();
      return arr.filter((a) => !res.has(a.type) && res.set(a.type, 1));
    },
    selectTab(val, auto) {
      if (val == 4) {
        this.activeStatus = true;
        this.current = "";
        this.selectTab3Item = null;
      }
      this.hisTabNum = this.tabNum;
      // console.log(val, this.hisTabNum)
      this.noData = false;
      this.tabDataArr = [];
      this.pageNum = 1;
      sessionStorage.tabNum = val;
      this.goodsCategoryId = "";
      this.$refs.my_scroller_tab1.finishInfinite(false);
      this.tabNum = val;
      this.isScroll = true;

      let currentPosition =
        this.$refs.my_scroller_tab1 &&
        this.$refs.my_scroller_tab1.getPosition() &&
        this.$refs.my_scroller_tab1.getPosition().top;
      //console.log(this.hisTabNum, currentPosition)
      // console.log("val", val)

      if (this.hisTabNum == 1) {
        sessionStorage.tab1ContentP = currentPosition ? currentPosition : 0;
      } else if (this.hisTabNum == 2) {
        sessionStorage.tab2ContentP = currentPosition ? currentPosition : 0;
      } else if (this.hisTabNum == 3) {
        // if(currentPosition&&currentPosition>20){
        if (!auto) {
          sessionStorage.tab3ContentP = currentPosition ? currentPosition : 0;
        }
        // }
      } else {
        sessionStorage.tab4ContentP = currentPosition ? currentPosition : 0;
      }

      if (val == 3) {
        this.selectTab3Item = this.goodsCategoryId = sessionStorage.goodsCategoryId
          ? sessionStorage.goodsCategoryId
          : this.selectTab3Item;
      }
    },
    goManage() {
      this.$router.go(-1);
      // if (this.$fromApp(this)) {
      //   this.$callJava({ code: 1007 });
      // } else {
      //   if (this.fromManage == 1) {
      //     // this.$router.push('/purchase')
      //     this.$router.go(-1);
      //   } else {
      //     this.$callJava({ code: 1007 });
      //   }
      // }
    },
    shareQR() {
      this.popover = !this.popover;
      this.shopInfo.linkUrl = this.linkURL;
      this.$callJava({
        code: 1008,
        shopName: this.shopInfo.name,
        shareLink: this.linkURL,
        shopLogo: this.shopInfo.logo,
      });
    },
    shareLink() {
      this.popover = !this.popover;
      this.shopInfo.linkUrl = this.linkURL;
      this.$callJava({
        code: 1009,
        shopName: this.shopInfo.name,
        shareLink: this.linkURL,
        shopLogo: this.shopInfo.logo,
      });
    },
    callUser() {
      if (Storage.get("token")) {
        if (this.$fromApp(this)) {
          this.$callJava({ code: 1001, phone: this.shopInfo.phone });
        } else {
          window.location.href = "tel:" + this.shopInfo.phone;
        }
      }
    },
    goShopInfo() {
      if (Storage.get("token")) {
        if (this.$fromApp(this)) {
          // this.$router.push({path:'/shop/info',query:{shopId:this.shopId,from:'app'}})
          this.$callJava({
            url: this.$webUrl + "shop/info?from=app&shopId=" + this.shopId,
            title: "店铺详情",
          });
        } else {
          this.$router.push({
            path: "/shop/info",
            query: { shopId: this.shopId },
          });
        }
      }
    },
    searchInput() {
      if (this.$fromApp(this)) {
        this.$router.push({
          path: "/purchase/searchAndResult",
          query: {
            shopId: this.shopId,
            zeroSaleState: this.shopZeroSaleState,
            from: "app",
          },
        });
        this.$callJava({ code: 1011 });
      } else {
        this.$router.push({
          path: "/purchase/searchAndResult",
          query: { shopId: this.shopId, zeroSaleState: this.shopZeroSaleState },
        });
      }
    },
    selectTab3Items(val, index) {
      //console.log("sellectTab3")
      this.activeStatus = false;
      this.current = index;
      this.pageNum = 1;
      this.noData = false;
      this.$refs.my_scroller_tab3 &&
        this.$refs.my_scroller_tab3.finishInfinite(false);
      if (this.selectTab3Item != val) {
        this.selectTab3Item = val;
        this.goodsCategoryId = val;
        sessionStorage.goodsCategoryId = val;
        sessionStorage.tab3Positon =
          this.$refs.my_scroller_tab3Left &&
          this.$refs.my_scroller_tab3Left.getPosition() &&
          this.$refs.my_scroller_tab3Left.getPosition().top;

        this.touchMoveScroll();
        this.$refs.my_scroller_tab1.scrollTo(0, 0, false);
        this.initData(-1, this.selectTab3Item);
      } else {
        // console.log('same modal')
      }
    },
    getScroll() {
      let position = 0;
      if (this.tabNum == 1 && sessionStorage.tab1ContentP) {
        position = sessionStorage.tab1ContentP;
      } else if (this.tabNum == 2 && sessionStorage.tab2ContentP) {
        position = sessionStorage.tab2ContentP;
      } else if (this.tabNum == 4 && sessionStorage.tab4ContentP) {
        position = sessionStorage.tab4ContentP;
      }

      if (this.tabNum == 3 && sessionStorage.tab3ContentP) {
        setTimeout(() => {
          if (this.$refs.my_scroller_tab3Left)
            this.$refs.my_scroller_tab3Left.scrollTo(
              0,
              sessionStorage.tab3Positon,
              false
            );
          if (this.$refs.my_scroller_tab1 && this.isScroll) {
            console.log("---sessionStorage.tab3ContentP--", this.isScroll);
            this.$refs.my_scroller_tab1.scrollTo(
              0,
              sessionStorage.tab3ContentP,
              false
            );
          }
        }, 80);
      } else {
        setTimeout(() => {
          if (this.$refs.my_scroller_tab1 && this.isScroll) {
            console.log("getScroll", position);
            this.$refs.my_scroller_tab1.scrollTo(0, position, false);
          }
        }, 50);
      }
    },
    initData(val, type = "", name = "", done) {
      let params = {
        goodsName: name,
        orderType: val,
        goodsCategoryId: type,
        sellerId: this.shopId,
        pageNo: this.pageNum,
        pageSize: 10,
      };
      this.$ajax.get(
        "replenish/search_goods/list",
        (res) => {
          //this.$vux.toast.text(res.msg, 'center');
          if (res.code == 200) {
            // console.log(res)
            for (let i = 0; i < res.data.length; i++) {
              for (let j = 0; j < res.data[i].unitVOList.length; j++) {
                if (!res.data[i].unitVOList[j].shoppingCartVO) {
                  res.data[i].unitVOList[j].shoppingCartVO = { num: 0 };
                }
                if (
                  this.shopZeroSaleState == 0 &&
                  res.data[i].zeroSaleFlag == 0
                ) {
                  res.data[i].unitVOList[j].stockFlag = false;
                } else {
                  if (
                    res.data[i].unitVOList[j].shoppingCartVO.num >=
                    res.data[i].unitVOList[j].goodsStock
                  ) {
                    res.data[i].unitVOList[j].stockFlag = true;
                  } else {
                    res.data[i].unitVOList[j].stockFlag = false;
                  }
                }
              }
            }

            if (res.data) {
              this.tabDataArr =
                this.pageNum == 1 ? res.data : this.tabDataArr.concat(res.data);
              this.pageNum++;
              if (this.isScroll) {
                console.log("scroll", this.isScroll);
                this.getScroll();
              }
            }

            if (typeof done == "function") {
              done();
            }

            this.$refs.my_scroller_tab1 &&
              this.$refs.my_scroller_tab1.finishPullToRefresh();

            if (!res.data || res.data.length < 10) {
              this.noData = true;
              if (this.$refs.my_scroller_tab1) {
                this.$refs.my_scroller_tab1.finishInfinite(true);
              }
            }

            console.log("tabData", this.tabDataArr);
          } else {
            // this.$vux.toast.text(res.msg, 'center');
          }
        },
        params
      );
    },

    inputCountFn(val, item) {
      this.$vux.confirm.show({
        title: "请输入商品数量",
        value: true,
        showInput: true,
        inputAttrs: { type: "number" },
        onCancel: () => {},
        onConfirm: (e) => {
          if (this.$checkIsNumber(e)) {
            if (e.length > 8) {
              this.$vux.toast.text("最多输入8位", "center");
              return;
            }
            this.$ajax.post(
              "replenish/shopping_cart/setting",
              {
                goodsId: val.unitGoodsPricesVO.goodsId,
                unitId: val.unitGoodsPricesVO.unitId,
                num: e,
              },
              (res) => {
                if (res.code == 200) {
                  this.$root.eventHub.$emit("updateCart");
                  val.shoppingCartVO.num = e;

                  if (this.shopZeroSaleState == 0 && item.zeroSaleFlag == 0) {
                    val.stockFlag = false;
                  } else {
                    if (val.shoppingCartVO.num >= val.goodsStock) {
                      val.stockFlag = true;
                    } else {
                      val.stockFlag = false;
                    }
                  }
                } else {
                  this.$vux.toast.text(res.msg, "center");
                }
              }
            );
          } else {
            this.$vux.toast.text("请输入正整数", "center");
          }
        },
      });
    },
    showPopover() {
      this.popover = !this.popover;
    },
    refresh1() {
      this.$refs.my_scroller_tab3Left &&
        this.$refs.my_scroller_tab3Left.finishPullToRefresh();
    },
    infinite1() {
      this.$refs.my_scroller_tab3Left &&
        this.$refs.my_scroller_tab3Left.finishInfinite(true);
    },
    refresh() {
      // this.pageNum = 1;
      // this.noData = false;
      this.initList();
      this.getList();
      // if (this.tabNum == 2) {
      //   sessionStorage.tab2ContentP = 0;
      //   this.initData(1, this.goodsCategoryId);
      // } else if (this.tabNum == 1) {
      //   sessionStorage.tab1ContentP = 0;
      //   this.initData(0, this.goodsCategoryId);
      // } else if (this.tabNum == 3) {
      //   sessionStorage.tab3ContentP = 0;
      //   this.initData(-1, this.goodsCategoryId);
      // } else {
      //   sessionStorage.tab4ContentP = 0;
      //   this.initData(2, this.goodsCategoryId);
      // }
    },
    infinite(done) {
      console.log("infinite");
      if (this.isLoad || this.noData) return;
      if (!this.noData) {
        setTimeout(() => {
          if (this.isLoad) {
            this.$refs.my_scroller_tab1.finishInfinite(true);
            this.isLoad = false;
          } else {
            this.getList(done);
            // switch (this.tabNum) {
            //   case 1:
            //     this.initData(0, this.goodsCategoryId, "", done);
            //     break;
            //   case 2:
            //     this.initData(1, this.goodsCategoryId, "", done);
            //     break;
            //   case 3:
            //     this.initData(-1, this.goodsCategoryId, "", done);
            //     break;
            //   case 4:
            //     this.initData(2, this.goodsCategoryId, "", done);
            //     break;
            // }
          }
        }, 100);
      } else {
        this.$refs.my_scroller_tab1.finishInfinite(true);
      }
    },

    // infinite(done){
    //   console.log("infinite")
    //   // if(this.firstOpen){
    //   //   this.$refs.my_scroller_tab1&&this.$refs.my_scroller_tab1.finishInfinite(true)
    //   //   this.firstOpen=false;
    //   //   return;
    //   // }
    //   // setTimeout(()=>{
    //     if(!this.noData){
    //       // this.pageNum++;
    //       switch (this.tabNum) {
    //         case 1:
    //           this.initData(0,1,this.goodsCategoryId,'',done);
    //           break;
    //         case 2:
    //           this.initData(1,1,this.goodsCategoryId,'',done);
    //           break;
    //         case 3:
    //           this.initData(0,1,this.goodsCategoryId,'',done);
    //           break;
    //         case 4:
    //           this.initData(2,1,this.goodsCategoryId,'',done);
    //           break;
    //       }
    //     }else{
    //         this.$refs.my_scroller_tab1&&this.$refs.my_scroller_tab1.finishInfinite(true)
    //     }
    //   // },600)
    // }
  },
};
</script>

<style type="text/less" lang="less" scoped>
.storeContent {
  .right {
    padding: 0.15rem;
    background: #fcfcfc;
    flex: 1;
    overflow-x: auto;
    white-space: nowrap;
    .item {
      height: 0.52rem;
      display: inline-flex;
      width: fit-content;
      color: #ffffff;
      padding: 0 0.28rem;
      // line-height: 0.52rem;
      background: rgba(70, 130, 255, 0.34);
      border-radius: 0.26rem;
      margin-right: 10px;
    }
    .active {
      background: rgba(70, 130, 255, 1);
    }
  }
}
.storeHeadBottom.new {
  margin: 0.15rem 0 !important;
  margin-bottom: 0 !important;
  background: #ffffff;
  &.active {
    .left {
      font-weight: bold;
      background: #ffffff;
    }
    .selectIcon {
      background-color: rgb(82, 125, 217);
    }
  }
  .left {
    width: 1.66rem;
    // padding: 0.15rem 0;
    height: 1.1rem !important;
    /*line-height: 1.1rem;*/
    font-size: 15px;
    background: #f5f5f5;
  }
  .selectIcon {
    display: inline-block;
    width: 0.1rem;
    height: 0.3rem;
    margin-right: 0.15rem;
    /*background-color: rgb(82, 125, 217);*/
  }
  .right {
    padding: 0.15rem;
    flex: 1;
    overflow-x: auto;
    white-space: nowrap;
    .item {
      height: 0.52rem;
      display: inline-flex;
      width: fit-content;
      color: #ffffff;
      padding: 0 0.28rem;
      // line-height: 0.52rem;
      background: rgba(70, 130, 255, 0.34);
      border-radius: 0.26rem;
      margin-right: 10px;
    }
    .active {
      background: rgba(70, 130, 255, 1);
    }
  }
}
ul > li {
  list-style: none;
}

input {
  -webkit-appearance: none;
}

.tabNav {
  position: fixed;
  bottom: 0px;
  left: 0px;
  display: flex;
  flex-direction: row;
}

.storeBody {
  height: 100%;
  padding-bottom: 0.1rem;
  box-sizing: border-box;
  background-color: #ffffff;

  .storeHead {
    width: 100%;
    /*height: 2.45rem;*/
    background-color: #f0f1f3;

    .tongzhi {
      margin-left: 0.4rem;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 0.1rem;

      img {
        height: 0.32rem;
        width: 0.4rem;
      }

      span {
        color: #333333;
        font-size: 0.28rem;
        margin-left: 0.1rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .storeHeadTop {
      margin: 0 0.3rem;
      height: 0.8rem;
      line-height: 1rem;

      .storeHeadL {
        p {
          margin-right: 0.2rem;
          color: #333333;
          font-size: 16px;
          font-weight: bold;
          width: 4.2rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .callUser {
          width: 1.34rem;
          height: 0.38rem;
          background: #517dd9;
          border-radius: 0.2rem;
          font-size: 12px;
          text-align: center;
          color: #fff;
          /*
            color: #8E919F;
            font-size: 12px;
            width: 1.26rem;
            height: .32rem;
            line-height: .32rem;
            text-align: center;
            border-radius: .16rem;
            border: 1px solid #8E919F;*/
        }

        img {
          width: 0.18rem;
          height: 0.34rem;
          padding-right: 0.2rem;
        }
      }

      .storeHeadR {
        position: relative;

        img {
          width: 0.48rem;
          height: 0.48rem;
        }

        .popover {
          position: absolute;
          left: -2.5rem;
          bottom: -1.9rem;
          width: 3rem;
          height: 2.02rem;
          background-color: #000000;
          border-radius: 0.08rem;
          opacity: 0.7;
          color: #ffffff;
          z-index: 10000;

          img {
            width: 0.4rem;
            height: 0.4rem;
          }
        }
      }
    }

    .storeMiddle {
      margin: 0.1rem 0.3rem;

      .searchInput {
        width: 100%;
        height: 0.64rem;
        text-indent: 0.3rem;
        border-radius: 0.32rem;
        outline: none;
        border: none;
        font-size: 15px;
      }

      .searchInput::placeholder {
        color: #c6c6c6;
        font-size: 15px;
        font-family: "iconfont" !important;
      }

      .searchInput::-moz-placeholder {
        color: #c6c6c6;
        font-size: 15px;
        font-family: "iconfont" !important;
      }

      .searchInput::-webkit-input-placeholder {
        color: #c6c6c6;
        font-size: 15px;
        font-family: "iconfont" !important;
      }
    }

    .storeHeadBottom {
      margin: 0.15rem 0.3rem 0 0.3rem;

      p {
        height: 0.4rem;
        line-height: 0.4rem;
        font-size: 14px;
        border-radius: 0.2rem;
        padding: 0 0.2rem;
        margin-right: 0.3rem;
      }
    }
  }

  .storeContent {
    .tab {
      .scrollerStyle {
        .shopList {
          .shopListItem {
            width: 7.2rem;
            margin-left: 0.3rem;
            border-bottom: 1px solid #ebebeb;
            padding-bottom: 0.2rem;

            .shopItemLeft {
              width: 2.4rem;
              position: relative;

              img {
                width: 1.84rem;
                height: 1.84rem;
                margin-top: 0.25rem;
              }

              ul {
                position: absolute;
                top: 0.2rem;
                left: 0;

                li {
                  margin-right: 0.1rem;
                  color: #ffffff;
                  font-size: 12px;
                  background-color: #fc6e51;
                  padding: 0.03rem 0.08rem;
                }
              }
            }

            .shopItemRight {
              width: 4.8rem;

              .goodsName {
                color: #333333;
                font-size: 15px;
                /*height: .8rem;*/
                margin: 0.2rem 0 0.1rem;
                /*line-height: .8rem;*/

                span {
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  overflow: hidden;
                  width: 4.7rem;
                }
              }

              .indent {
                height: 0.6rem;
                padding-right: 0.3rem;

                .goodsPackPrice {
                  color: #fb6e52;

                  span {
                    font-size: 12px;
                  }

                  p {
                    font-size: 18px;
                  }
                }

                .goodsDetail {
                  color: #999999;
                  height: 0.32rem;
                  line-height: 0.32rem;
                  background-color: #eeeeee;
                  border-radius: 0.16rem;
                  padding: 0 0.15rem;
                  margin-top: 0.05rem;
                  font-size: 10px;
                }

                .operation {
                  img {
                    width: 0.46rem;
                    height: 0.46rem;
                  }

                  p {
                    margin: 0 0.1rem;
                    width: 0.6rem;
                    height: 0.5rem;
                    border-radius: 2px;
                    background-color: #eeeeee;
                  }
                }
              }

              .packPriceAndShopping {
                margin-top: 0.1rem;
                border-bottom: 1px solid #ebebeb;
              }

              .packPriceAndShopping:last-child {
                border-bottom: none;
              }
            }
          }
        }
      }
    }

    .tab3 {
      height: 100%;

      .tab3L {
        width: 1.66rem;
        background-color: #f7f7f7;

        p {
          height: 1.1rem !important;
          /*line-height: 1.1rem;*/
          font-size: 15px;

          .selectIcon {
            display: inline-block;
            width: 0.1rem;
            height: 0.3rem;
            margin-right: 0.15rem;
          }

          span {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            width: 1.5rem;
          }
        }
      }

      .tab3R {
        width: 5.84rem;
        overflow-y: auto;

        .shopList {
          .shopListItem {
            width: 5.5rem;
            margin-left: -1.34rem;
            border-bottom: 1px solid #ebebeb;
            padding-bottom: 0.2rem;

            .shopItemLeft {
              width: 2rem;
              position: relative;

              img {
                width: 1.84rem;
                height: 1.84rem;
                margin-top: 0.25rem;
              }

              ul {
                position: absolute;
                top: 0.2rem;
                left: 0;

                li {
                  margin-right: 0.1rem;
                  color: #ffffff;
                  font-size: 12px;
                  background-color: #fc6e51;
                  padding: 0.03rem 0.08rem;
                }
              }
            }

            .shopItemRight {
              width: 3.5rem;

              .goodsName {
                color: #333333;
                font-size: 14px;
                /*height: .8rem;*/
                margin: 0.2rem 0 0.1rem;
                /*line-height: .8rem;*/

                span {
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  overflow: hidden;
                  width: 3.4rem;
                }
              }

              .indent {
                height: 0.6rem;
                padding-right: 0.3rem;

                .goodsPackPrice {
                  color: #fb6e52;

                  span {
                    font-size: 12px;
                  }

                  p {
                    font-size: 18px;
                  }
                }

                .goodsDetail {
                  color: #999999;
                  height: 0.32rem;
                  line-height: 0.32rem;
                  background-color: #eeeeee;
                  border-radius: 0.16rem;
                  padding: 0 0.1rem;
                  margin-top: 0.05rem;
                  font-size: 10px;
                }

                .operation {
                  img {
                    width: 0.46rem;
                    height: 0.46rem;
                  }

                  p {
                    margin: 0 0.1rem;
                    width: 0.6rem;
                    height: 0.5rem;
                    border-radius: 2px;
                    background-color: #eeeeee;
                  }
                }
              }

              .packPriceAndShopping {
                margin-top: 0.1rem;
                border-bottom: 1px solid #ebebeb;
              }

              .packPriceAndShopping:last-child {
                border-bottom: none;
              }
            }
          }
        }
      }
    }
  }
}
</style>
